<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8" />
	<title> 多行文字实现垂直居中 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		body { font-size:12px;font-family:tahoma;}
		div#wrap {
			display:table;
			border:1px solid #FF0099;
			background-color:#FFCCFF;
			width:760px;
			height:400px;
			_position:relative;
			overflow:hidden;
		}
		div#subwrap {
			vertical-align:middle;
			display:table-cell;
			_position:absolute;
			_top:50%;
		}
		div#content {
			_position:relative;
			_top:-50%;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="subwrap">
			<div id="content">
				<pre>现在我们要使这段文字垂直居中显示！
div#wrap {
	border:1px solid #FF0099;
	background-color:#FFCCFF;
	width:760px;
	height:500px;
	position:relative;
}
div#subwrap {
	position:absolute;
	border:1px solid #000;
	top:50%;
}
div#content {
	border:1px solid #000;
	position:relative;
	top:-50%;
}</pre>
			</div>
		</div>
	</div>
</body>
</html>
